<!DOCTYPE html/>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>期限理财</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    body{
        padding: 0px;
        margin: 0px;
        background-color: lavender;
    }
    .sum{
        width: 90%;
        height: 90%;
        display: table;
        margin: 0 auto;
    }
    .hdader{
        height: 50px;
        margin-top: 20px;
    }
    .zeng{
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
</style>

<body>
<div class="sum" id="app">
    <div class="hdader">
        <h4 style="padding-top: 8px;padding-left: 20px">期限理财</h4>
    </div>

    <div class="zeng">
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>
    </div>

    <!--    </table>-->
    <template>
        <div class="table">
            <el-table class="table-primary"
                      :data="userList"
                      style="width: 100%">
                <el-table-column
                        prop="t_id"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="t_name"
                        label="产品名称"
                        width="180">
                </el-table-column>
                <el-table-column  label="起投金额">
                    <template slot-scope="scope">
                        {{scope.row.t_amount+'元'}}
                    </template>
                </el-table-column>
                <el-table-column label="收益方式">
                    <template slot-scope="scope">
                        {{scope.row.t_income+''}}
                    </template>
                </el-table-column>
                <el-table-column label="七日年化收益率">
                    <template slot-scope="scope">
                        {{scope.row.t_yield+'%'}}
                    </template>
                </el-table-column>
                <el-table-column label="投资期限">
                    <template slot-scope="scope">
                        {{scope.row.h_day+'天'}}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="btn btn-info" @click="update(scope.row.t_id)" data-toggle="modal" data-target="#myModal1">编辑</el-button>
                        <span><el-button  type="text" size="small" class="btn btn-warning" @click="deleteById(scope.row.t_id)">删除</el-button></span>

                    </template>
                </el-table-column>
            </el-table>
            <!--   total 总条数   prev 上一页 pager 当前页 next 下一页 jumper 前往第几页-->
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    :pager="pager"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </template>
    <!-- 模态框编辑 -->
    <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">编辑期限理财产品</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <form action="/financial/update">
                    <div class="modal-body input-group">
                        <input name="t_id" type="hidden" v-model="add.t_id">
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">产品名称</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入产品名称：" v-model="add.t_name"  name="t_name">
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">起投金额</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入起投金额：" v-model="add.t_amount" name="t_amount">
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">收益方式</span>
                                </div>
                                <select  class="selectpicker show-tick form-control" v-model="add.t_income" name="t_income">
                                    <option>收益型</option>
                                    <option>净值型</option>
                                </select>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">七日年化收益率</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入七日年化收益率：" v-model="add.t_yield"  name="t_yield">
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">投资期限</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入投资期限：" v-model="add.h_day" name="h_id">
                            </div>
                        </div>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-info" @cilck="xg"  value="提交">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 模态框添加 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">新增期限理财产品</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <form action="/financial/insert">
                    <div class="modal-body input-group">
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">产品名称</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入产品名称："  name="t_name">
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">起投金额</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入起投金额：" name="t_amount">
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">收益方式</span>
                                </div>
                                <select  class="selectpicker show-tick form-control" name="t_income">
                                    <option>收益型</option>
                                    <option>净值型</option>
                                </select>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">七日年化收益率</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入七日年化收益率："  name="t_yield">
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">投资期限</span>
                                </div>
                                <input type="text" class="form-control" placeholder="请输入投资期限：" name="h_id">
                            </div>
                        </div>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-info" @click="tj" value="提交">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    new Vue( {
        el:"#app",
        data:{
            currentPage:1, //初始页
            pageSize:5,    //    每页的数据
            total:1,
            pager:1,
            userList: [],
            add:{},
            pageNum:{}
        },  methods: {
            tj:function(){
                alert("添加成功！")
            },
            xg:function(){
                alert("提交成功！");
            },
            update:function (t_id) {
                var thah = this;
                axios.post('http://localhost:8080/financial/selectById',"t_id="+t_id)
                    .then(function (response) {
                        console.log(response);
                        thah.add = response.data.byId;
                    }).catch(function (error) {
                    console.log(error);
                })
            },  deleteById:function(t_id){
                let msg2 = "您真的确定要删除吗？\n\n请确认！";
                if (confirm(msg2)==true) {
                    alert("删除成功！") ;
                var that = this;
                axios.post('http://localhost:8080/financial/delete',"t_id="+t_id)
                    .then(function (response) {
                        console.log(response);
                        that.userList=response.data.list;
                        that.pageNum = response.data.pageNum;
                        console.log(response.data.list);
                    }).catch(function (error) {
                    console.log(error);
                })
            }},
            handleSizeChange(pageSize){
                this.pageSize = pageSize;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize)
            },
            showData(currentPage,pageSize){
                var _this = this;
                axios.get("/financial/getUserList/"+currentPage+"/"+pageSize).then(res=>{
                    console.log(res);
                    _this.userList = res.data.list;
                    _this.total = res.data.total;
                    console.log(res.data.list);
                    _this.pageNums = res.data.pageNum;
                    console.log(res.data.pageNum);
                })
            },
            handleCurrentChange(currentPage){
                this.currentPage = currentPage;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize);
            }
        },
        created() {
            this.showData(1, 5)
        }
    })

</script>
</html>